<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><router-link to="/basic/contract">合同管理</router-link></el-breadcrumb-item>
        <el-breadcrumb-item>合同详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <basic-container>
      <div style="padding: 20px;">
        <el-row :gutter="20" class="common-height">
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">合同编号：{{categoryForm.salesContractSn}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">合同状态：{{categoryForm.contractStatus}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">合同金额：{{categoryForm.contractAmount}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">市场负责人：{{categoryForm.directorName}}</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="common-height">
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">客户编号：{{categoryForm.customerSn}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">客户名称：{{categoryForm.customerName}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">客户联系人：{{categoryForm.linkmanName}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">销售分润比例：{{categoryForm.salesRate}}</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="common-height">
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">签约时间：{{categoryForm.contractTime}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">结束时间：{{categoryForm.closedTime}}</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="common-height">
          <el-col :span="24">
            <div class="grid-content bg-purple text-left">合同描述：{{categoryForm.contractDesc}}</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="common-height">
          <el-col :span="24">
            <div class="grid-content bg-purple text-left">条件条款：{{categoryForm.conditions}}</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="common-height">
          <el-col :span="24">
            <div class="grid-content bg-purple text-left flex">
              <div>图片列表：</div>
              <div v-if="categoryForm.photoList" class="thumbUrl m-l" v-for="(item,index) in categoryForm.photoList">
                <el-image
                style="width: 60px; height: 60px"
                :src="item.picUrl" 
                :preview-src-list="[item.picUrl]"/>
              </div>
            </div>
          </el-col>
        </el-row>

        </el-form>
      </div>
    </basic-container>
    
  </div>
</template>

<script>
  import {getStore, setStore} from "@/util/store";
  import selImgPhotogallery from '@/components/pds/common/sel_img_photogallery'
  import {
    fetchList,
  } from '@/api/crm/customer'
  import {
    fetchList as linkman,
  } from '@/api/crm/customerlinkman' //联系人
  import { contractEdit, getDetail } from '@/api/crm/salescontract'
  import {
    mapGetters
  } from 'vuex'
  import {
    fetchList as teamList,
  } from '@/api/crm/marketemployee'
  import {fetchDict} from '@/util/util';
  import { getStatusName } from '@/const/common/tool';
  export default {
    data() {
      return {
        categoryForm:{},
        sleImg:false,
        contract_status: [],
      }
    },
    components: {  selImgPhotogallery },
    created(){
      this.init();
    },
    methods: {
      async init(){
        await fetchDict('scm_contract_status', this.contract_status);
        let params ={};
        params.contractSn = JSON.parse(this.$route.query.res).salesContractSn;
        getDetail(params).then(response => {
          this.categoryForm = response.data.data;
          this.categoryForm.contractStatus = getStatusName(this.contract_status, this.categoryForm.contractStatus);
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .text-left {
      text-align: left;
      margin-left: 10px;
    }
  .flex {
    display: flex;
  }
  .crumbs{
    margin: 20px 10px;
  }

  .thumbUrl {
    display: inline-block;
  }

</style>


